<template>
  <div>
    <el-row>
      <el-col :span="5">标题</el-col>
      <el-col :span="18">{{plan.title}}</el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col :span="5">提示问题</el-col>
      <el-col :span="18">{{plan.question}}</el-col>
    </el-row>
    <hr>
    <el-row>
      <ol>
        <!-- 提示问题列表 -->
        <template v-for="(item,index) in plan.questionList">
          <li :key="index">
            <!-- 问题内容 -->
            <el-tag
              style="color: black;font-size: 14px;"
              :disable-transitions="false">
              {{item.question}}
            </el-tag>
          </li>
        </template>
      </ol>
    </el-row>
    <hr>
    <el-row>
      <el-col :span="5">内容详情</el-col>
      <el-col :span="18">
        <!-- 切换器 -->
        <el-switch
          v-model="viewMarkdown"
          active-text="Markdown"
          inactive-text="富文本">
        </el-switch>
        <hr>
        <!-- 显示富文本 -->
        <div v-show="viewMarkdown===false">
          <div  v-html="plan.detail">
            {{ plan.detail }}
          </div>
        </div>
        <!-- Markdown -->
        <div v-if="viewMarkdown">
          <d2-markdown :source="plan.detailMd" highlight/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      viewMarkdown: false, // false --quill，true --Markdown
      plan: {
        palnId: '',
        title: '',
        detail: '<p><br></p>',
        detailMd: '',
        question: '',
        questionList: []
      }
    }
  },
  mounted () {
  },
  methods: {
    init (data) {
      this.plan = data || {
        palnId: '',
        title: '',
        detail: '<p><br></p>',
        detailMd: '',
        question: '',
        questionList: []
      }
      // questionList有可能为null
      this.plan.questionList = this.plan.questionList || []
      this.plan.detailMd = this.plan.detailMd || ''
    }
  }
}
</script>

<style>

</style>
